<template>
  <div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        websock: null,
      }
    },
    created(){
      //页面刚进入时开启长连接
      this.initWebSocket()
    },
    destroyed: function() {
      //页面销毁时关闭长连接
      this.websocketclose();
    },
    methods: {
      initWebSocket(){ //初始化weosocket

        const wsuri = process.env.WS_API + "/websocket/threadsocket";//ws地址
        this.websock = new WebSocket(wsuri);
        this.websocket.onopen = this.websocketonopen;

        this.websocket.onerror = this.websocketonerror;

        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
      },

      websocketonopen() {
        console.log("WebSocket连接成功");
      },
      websocketonerror(e) { //错误
        console.log("WebSocket连接发生错误");
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
        //注意：长连接我们是后台直接1秒推送一条数据，
        //但是点击某个列表时，会发送给后台一个标识，后台根据此标识返回相对应的数据，
        //这个时候数据就只能从一个出口出，所以让后台加了一个键，例如键为1时，是每隔1秒推送的数据，为2时是发送标识后再推送的数据，以作区分
        console.log(redata.value);
      },

      websocketsend(agentData){//数据发送
        this.websock.send(agentData);
      },

      websocketclose(e){ //关闭
        console.log("connection closed (" + e.code + ")");
      },
    },
  }
</script>
